<template>
  <view class="container">
    <!-- 随访记录列表 -->
    <view class="follow-up-list">
      <van-cell title="随访记录" :border="false">
        <template #right-icon>
          <van-button
            type="primary"
            size="small"
            @click="showNewFollowUp = true"
          >
            新增随访
          </van-button>
        </template>
      </van-cell>
      
      <view v-if="followUpRecords.length === 0" class="empty-state">
        <van-empty description="暂无随访记录">
          <van-button
            type="primary"
            size="small"
            @click="showNewFollowUp = true"
          >
            创建首次随访
          </van-button>
        </van-empty>
      </view>
      
      <van-collapse v-else v-model="activeNames" accordion @change="handleCollapseChange">
        <van-collapse-item
          v-for="record in followUpRecords"
          :key="record.id"
          :title="`随访记录 - ${record.date}`"
          :name="record.id.toString()"
        >
          <template #value>
            <van-tag :type="getStatusType(record.status)">{{ record.status }}</van-tag>
          </template>
          
          <view class="record-detail">
            <van-cell-group>
              <van-cell title="随访时间" :value="record.date" />
              <van-cell title="随访方式" :value="record.method" />
              <van-cell title="血压" :value="record.vitals.bloodPressure" />
              <van-cell title="血糖" :value="record.vitals.bloodSugar" />
              <van-cell title="体重" :value="record.vitals.weight" />
              <van-cell title="症状变化" :value="record.symptoms || '无明显变化'" />
              <van-cell title="用药依从性" :value="record.medicationCompliance" />
              <van-cell title="医生建议" :value="record.advice || '继续观察'" />
            </van-cell-group>
          </view>
        </van-collapse-item>
      </van-collapse>
    </view>

    <!-- 新增随访弹窗 -->
    <van-popup
      v-model:show="showNewFollowUp"
      position="bottom"
      :style="{ height: '80%' }"
      closeable
      close-icon-position="top-right"
      @close="showNewFollowUp = false"
      @click-overlay="showNewFollowUp = false"
    >
      <view class="new-follow-up">
        <view class="popup-title">新增随访记录</view>
        
        <scroll-view class="form-content" scroll-y>
          <van-cell-group>
            <van-field
              v-model="newRecord.date"
              label="随访时间"
              placeholder="请选择随访时间"
              readonly
              is-link
              @click="showDatePicker = true"
            />
            
            <van-cell title="随访方式" :border="false">
              <template #default>
                <van-radio-group v-model="newRecord.method" direction="horizontal">
                  <van-radio name="线上">线上</van-radio>
                  <van-radio name="门诊">门诊</van-radio>
                  <van-radio name="电话">电话</van-radio>
                </van-radio-group>
              </template>
            </van-cell>
          </van-cell-group>
          
          <van-cell-group>
            <van-cell title="生命体征" :border="false" />
            <van-field
              v-model="newRecord.vitals.bloodPressure"
              label="血压"
              placeholder="如：120/80 mmHg"
            />
            <van-field
              v-model="newRecord.vitals.bloodSugar"
              label="血糖"
              placeholder="如：6.5 mmol/L"
            />
            <van-field
              v-model="newRecord.vitals.weight"
              label="体重"
              placeholder="如：70 kg"
            />
          </van-cell-group>
          
          <van-cell-group>
            <van-field
              v-model="newRecord.symptoms"
              label="症状变化"
              type="textarea"
              :autosize="{ minHeight: 80 }"
              placeholder="请描述症状变化情况"
            />
          </van-cell-group>
          
          <van-cell-group>
            <van-cell title="用药依从性" :border="false">
              <template #default>
                <van-radio-group v-model="newRecord.medicationCompliance">
                  <van-radio name="良好">良好</van-radio>
                  <van-radio name="一般">一般</van-radio>
                  <van-radio name="较差">较差</van-radio>
                </van-radio-group>
              </template>
            </van-cell>
          </van-cell-group>
          
          <van-cell-group>
            <van-field
              v-model="newRecord.advice"
              label="医生建议"
              type="textarea"
              :autosize="{ minHeight: 80 }"
              placeholder="医生建议和注意事项"
            />
          </van-cell-group>
        </scroll-view>
        
        <view class="popup-actions">
          <van-button @click="showNewFollowUp = false">取消</van-button>
          <van-button type="primary" @click="saveFollowUp" :loading="saving">
            保存
          </van-button>
        </view>
      </view>
    </van-popup>

    <!-- 日期选择器 -->
    <van-popup 
      v-model:show="showDatePicker" 
      position="bottom"
      closeable
      @close="showDatePicker = false"
      @click-overlay="showDatePicker = false"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择随访时间"
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false"
      />
    </van-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";

interface FollowUpRecord {
  id: number;
  date: string;
  method: string;
  status: string;
  vitals: {
    bloodPressure: string;
    bloodSugar: string;
    weight: string;
  };
  symptoms: string;
  medicationCompliance: string;
  advice: string;
}

const diseaseId = ref("");
const activeNames = ref<string[]>([]);
const showNewFollowUp = ref(false);
const showDatePicker = ref(false);
const currentDate = ref(new Date());
const saving = ref(false);

const followUpRecords = ref<FollowUpRecord[]>([
  {
    id: 1,
    date: "2024-01-15",
    method: "门诊",
    status: "已完成",
    vitals: {
      bloodPressure: "130/85 mmHg",
      bloodSugar: "6.8 mmol/L",
      weight: "72 kg"
    },
    symptoms: "血压控制良好，偶有头晕",
    medicationCompliance: "良好",
    advice: "继续服药，注意饮食控制"
  },
  {
    id: 2,
    date: "2024-02-20",
    method: "线上",
    status: "已完成", 
    vitals: {
      bloodPressure: "135/88 mmHg",
      bloodSugar: "7.2 mmol/L",
      weight: "71.5 kg"
    },
    symptoms: "血糖略有升高",
    medicationCompliance: "一般",
    advice: "调整用药剂量，加强运动"
  }
]);

const newRecord = reactive({
  date: "",
  method: "线上",
  vitals: {
    bloodPressure: "",
    bloodSugar: "",
    weight: ""
  },
  symptoms: "",
  medicationCompliance: "良好",
  advice: ""
});

const getStatusType = (status: string) => {
  switch (status) {
    case "已完成":
      return "success";
    case "进行中":
      return "warning";
    case "已取消":
      return "danger";
    default:
      return "default";
  }
};

const onDateConfirm = () => {
  newRecord.date = currentDate.value.toISOString().split('T')[0];
  showDatePicker.value = false;
};

const validateForm = () => {
  if (!newRecord.date) {
    uni.showToast({ title: "请选择随访时间", icon: "none" });
    return false;
  }
  if (!newRecord.vitals.bloodPressure) {
    uni.showToast({ title: "请输入血压值", icon: "none" });
    return false;
  }
  return true;
};

const saveFollowUp = () => {
  if (!validateForm()) {
    return;
  }

  saving.value = true;

  setTimeout(() => {
    const newId = followUpRecords.value.length + 1;
    followUpRecords.value.unshift({
      id: newId,
      date: newRecord.date,
      method: newRecord.method,
      status: "已完成",
      vitals: { ...newRecord.vitals },
      symptoms: newRecord.symptoms,
      medicationCompliance: newRecord.medicationCompliance,
      advice: newRecord.advice
    });

    Object.assign(newRecord, {
      date: "",
      method: "线上",
      vitals: {
        bloodPressure: "",
        bloodSugar: "",
        weight: ""
      },
      symptoms: "",
      medicationCompliance: "良好",
      advice: ""
    });

    saving.value = false;
    showNewFollowUp.value = false;

    uni.showToast({
      title: "随访记录保存成功",
      icon: "success"
    });
  }, 1500);
};

const handleCollapseChange = (names: string[]) => {
  console.log("折叠面板变化:", names);
};

onLoad((options: any) => {
  diseaseId.value = options.diseaseId || "";
  console.log("线上随访页面 onLoad", options);
});
</script>

<style lang="scss">
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.follow-up-list {
  background: white;
  margin-bottom: 16rpx;
}

.empty-state {
  padding: 64rpx 32rpx;
}

.record-detail {
  background: #f8f9fa;
  margin: 16rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.new-follow-up {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.popup-title {
  padding: 32rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  border-bottom: 1rpx solid #eee;
}

.form-content {
  flex: 1;
  padding: 16rpx 0;
}

.popup-actions {
  padding: 24rpx 32rpx;
  background: white;
  border-top: 1rpx solid #eee;
  display: flex;
  gap: 24rpx;
  
  .van-button {
    flex: 1;
  }
}
</style>